<template>
	<view class="avaliable-count-item">
		<view class="item-info flexr align-center">
			<image class="item-icon" src="@/subpages/static/shop_removed.png"></image>
			<view class="flex-1">
				<view class="item-title">
					{{ item.cardName }}
				</view>
				<view class="left-count">
					剩余使用次数: <text class="text-color-primary">{{ item.remainingCount }}</text>
				</view>
				<view class="primary-button disable-button" v-if="!item.isExpire">
					已过期
				</view>
				<view v-else>
					{{item.expireTime}}过期
				</view>
			</view>
			<!-- <view class="primary-button">
				使用
			</view> -->
		</view>
		<view class="use-tips">
			<view class="use-tips-top flexr align-center">
				<text class="flex-1">用户使用须知</text>
				<image class="arrow-down" src="@/static/arrow_down.png"
					:class="{
						'open': open
					}"
					@click="open = !open"></image>
			</view>
			<view class="use-tips-content" v-if="open">
				本次卡适用: 品牌: {{ item.brandName }} 品类: {{ item.typeName }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
defineProps({
	item: Object
})
const open = ref(false)
</script>

<style lang="scss">
.avaliable-count-item {
	border-radius: 15rpx;
	overflow: hidden;
	.item-info {
		background-color: white;
		height: 192rpx;
		color: $text-color5;
		font-size: 24rpx;
		padding: 0 16rpx;
		.item-icon {
			width: 160rpx;
			height: 160rpx;
			margin-right: 25rpx;
		}
		.item-title {
			font-size: 28rpx;
			color: $text-color1;
			margin-bottom: 20rpx;
		}
		.left-count {
			margin-bottom: 5rpx;
		}
		.primary-button {
			width: 80rpx;
      height: 30rpx;
      line-height: 30rpx;
			font-size: 20rpx;
      margin-top: 15rpx;
		}
	}
	.use-tips {
		background-color: $divider-color;
		font-size: 24rpx;
		color: $text-color2;
		.use-tips-top {
			height: 80rpx;
			padding: 0 32rpx;
			.arrow-down {
				width: 50rpx;
				height: 34rpx;
				padding: 8rpx 12rpx;
				box-sizing: border-box;
				&.open {
					rotate: 180deg;
				}
			}
		}
		.use-tips-content {
			padding: 0 32rpx 32rpx;
		}
	}
}
</style>